<!--视频组-->
<template>
    <div class="video-group" v-show="videoInfoList.length>0">
        <div class="video-group-title">
            <span style="font-size:16px;">正片</span>
            <span style="font-size:12px;color:#999999;float:right;">{{currentVideoIndex}}/{{videoInfoList.length}}</span>
        </div>
        <div class="video-group-content">
            <template v-show="videoInfoList.length>0" v-for="item in videoInfoList">
                <span v-bind:key="item.videoId">
                    <button v-bind:title="item.videoTitle" v-bind:class="{'el-button-select': item.fenzuIndex===currentVideoIndex }" type="button" class="video-group-button video-group-content-button" @click="changeVideo(item)">
                        <span>{{item.fenzuIndex}}</span>
                    </button>
                </span>
            </template>
        </div>

    </div>
</template>

<script>
    export default {
        name: "videoGroup",
        data(){
            return{
                currentVideoIndex:0,
                videoInfoList:[]
            }
        },
        methods:{
            currentVideoIndexChange(newValue){
                this.currentVideoIndex = newValue;
            },
            videoInfoListChange(newValue){
                this.videoInfoList = newValue;
            },
            changeVideo(videoInfo){
                var localStorage = window.localStorage;
                localStorage.setItem("videoInfo",JSON.stringify(videoInfo));
                this.$router.go(0);
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .video-group{
        background-color: #f4f4f4;
        border-radius: 2px;
        min-height:100px;
        margin-bottom:20px;
        margin-top:10px;
        margin-left:10px;
    }

    .video-group-title{
        height:42px;
        padding: 0 16px;
        color:#212121;
        line-height:42px;
    }

    .video-group-content{
        min-height:42px;
        padding: 15px 0 20px 28px;
        /*background-color: red;*/
    }

    .video-group-content-button{
        border-radius:1px !important;
        min-width:66px;
        margin-bottom:20px;
        margin-left:0px;
        margin-right:10px;
    }

    .video-group-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        margin: 5px;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }

    .el-button-select{
        color:white;
        background-color: #00A1D6 !important;
    }

    .video-group-button:hover{
        color:#00A1D6;
        border:1px solid #00A1D6 !important;
    }

    .el-button-select:hover{
        color:white;
        background-color: #00A1D6 !important;

    }




</style>
